@use './variable.scss';
@use './init';
@use './layout.scss';

#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  color: var(--color);
}

.ln-title {
  height: 40px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color);
}

.ln-header {
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-menu-item.active {
  background-color: var(--parmary);
  color: #fff;
}

.nav-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;

  .nav-item {
    width: calc((100% - 30px) / 4);
    border: 1px solid var(--borderColor);
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;

    &:nth-of-type(4n) {
      margin-right: 0px;
    }

    .top {
      margin-bottom: 8px;
    }

    .el-image {
      border-radius: 40px;
      margin-right: 10px;
    }

    .title {}

    .description {
      font-size: 12px;
    }

    .image-slot {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--parmary);
      color: #fff;
    }
  }


}